<template>
  <device_manage
    :search="search"
    @handleInfo="handleInfo"
  >
    <device_condition title="选择设备类型" :content-style="{display: 'flex', alignItems: 'center'}">
      <span>设备类型</span>
      <el-select v-model="search.deviceType" size="small" style="width: 150px;overflow: hidden;margin-left: 5px">

      </el-select>
    </device_condition>
    <template #list-search>
      <el-col :span="4.8">
        <el-button type="info" size="small"><i class="el-icon-s-operation"/>批量控制</el-button>
      </el-col>
      <el-col :span="4.8">
        <span>运行状态</span>
        <el-select v-model="search.runningStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>报警状态</span>
        <el-select v-model="search.alarmStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in alarmStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>启动状态</span>
        <el-select v-model="search.startupStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in startupStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <el-input placeholder="请输入设备名称/编号搜索" v-model="search.text" size="small" class="search" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </template>
    <template #table-column>
      <el-table-column type="selection" width="50"/>
      <el-table-column prop="deviceName" label="设备名称" min-width="120px"/>
      <el-table-column prop="deviceNo" label="设备编号" min-width="120px"/>
      <el-table-column prop="installationSite" label="安装位置" show-overflow-tooltip min-width="120px"/>
      <el-table-column prop="whereUsed" label="使用位置" show-overflow-tooltip min-width="120px"/>
      <el-table-column label="运行状态" width="80px">
        <template v-slot="{row}">
          <span>{{runningStatusArr[row.runningStatus].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="启动状态" width="80px">
        <template v-slot="{row}">
          <span>{{startupStatusArr[row.startupStatus].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警状态" width="80px">
        <template v-slot="{row}">
          <span>{{alarmStatusArr[row.alarmStatus].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前设定温度" width="110px">
        <template v-slot="{row}">
          <span>{{row.temperature}}℃</span>
        </template>
      </el-table-column>
      <el-table-column prop="fanStatus" label="风机状态" width="80px"/>
      <el-table-column fixed="right" label="操作" width="150px">
        <template v-slot="{row}">
          <el-button size="small" @click="handleControl(row)">控制</el-button>
          <el-button size="small" @click="handleInfo(row)">详情</el-button>
        </template>
      </el-table-column>
    </template>
    <el-dialog
      :visible.sync="showInfo"
      :title="`${info.deviceName}（${info.deviceNo}）`"
      width="80%"
    >
      <img :src="info.img" alt="" class="device-img">
      <table class="device-control">
        <tr><td colspan="2"><span class="device-control-title">设备控制</span></td></tr>
        <tr>
          <td>风机手自动</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>机组启动</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>风机启停</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>送风温度设定</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>送风机变频调节</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>冷水阀调节</td>
          <td>
            <el-select v-model="info.runningStatus" size="small">
              <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </td>
        </tr>
      </table>
    </el-dialog>
  </device_manage>
</template>

<script>
import Device_manage from "./device_manage";
import Device_condition from "./device_condition";
import img from "../../assets/test/v2_qy1dqg.png";
import '../../assets/css/device-dialog.css'

export default {
  name: "drainage",
  components: {Device_condition, Device_manage},
  data() {
    return {
      search: {
        deviceType: null,
        text: '',
        runningStatus: null,
        alarmStatus: null,
        startupStatus: null,
      },
      runningStatusArr: [
        {value: 0, label: '在线'},
        {value: 1, label: '离线'},
      ],
      alarmStatusArr: [
        {value: 0, label: '正常'},
        {value: 1, label: '报警'},
      ],
      startupStatusArr: [
        {value: 0, label: '启动'},
        {value: 1, label: '停止'},
      ],
      showInfo: false,
      info: {
        deviceName: '',
        deviceNo: '',
        img: '',
      },
    }
  },
  methods: {
    handleControl(info) {
      this.info = info;
      this.info.img = img;
      this.showInfo = true;
    },
    handleInfo(info) {
      this.info = info;
      this.info.img = img;
      this.showInfo = true;
    }
  }
}
</script>

<style scoped>

</style>
